<template>
  <view class="area-card flex">
    <block
      v-for="item in list"
      :key="item.id">
      <view
        class="area-item tap-active"
        @click="change(item)">
        <u--image
          :show-loading="true"
          :src="item.icon"
          width="100%"
          class="area-pic"
          height="72px"></u--image>
      </view>
    </block>
  </view>
</template>

<script>
import { getAreaList } from '@/api/pet-core.js';
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const { data } = await getAreaList();
        this.list = data;
      } catch (e) {
        //TODO handle the exception
        throw new Error(e);
      }
    },
    change(item) {
      uni.navigateTo({
        url: `/pages/area-cat/index?id=${item.id}&name=${item.name}`,
      });
    },
  },
};
</script>

<style lang="scss">
	.area-card{
		border-radius: $pd;
		background-color: white;
		padding: 20rpx 20rpx 8rpx;
		margin-top: $pd;
		flex-wrap: wrap;
		.area-item{
			width: 20%;
			padding: 0 6rpx;
			margin-bottom: 12rpx;
			box-sizing: border-box;
		}
	}
</style>